<template>
    <div>
        <div class="header">
            <router-link to="/tap-water/list01"><img src="@/assets/tap-water/images/fh.png" alt=""></router-link>
            <h2>立即缴费</h2>
        </div>
        <ul class="sfjn">


            <li>
                <label>缴费金额</label>
                <span>¥234.89</span>
            </li>

            <li>
                <label>缴费单位</label>
                <span>建湖县自来水有限公司</span></li>

            <li>
                <label>缴费户号</label>
                <span>190876543</span></li>
        </ul>
        <div class="btn" @click="pay">
            <router-link to="">立即缴费</router-link>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import axios from 'axios'

    // 获取用户信息
    // code:部门 100：卫健委；101：体育局；102：供水公司；103：住建局；104：文广旅居
    async function initSdk(appId, keyId, userDataTypes) {
        const baseUrl = Vue.prototype.baseUrl; // 服务器地址
        // 初始化api sdk
        await fetchInitCode(appId, keyId, userDataTypes, baseUrl)
    }

    // 初始化api sdk
    async function fetchInitCode(appId, keyId, userDataTypes, baseUrl) {
        const time = sessionStorage.getItem('initCodeTime');
        if (time) {
            // 有code时直接运行
            const lastTime = new Date().getTime() - time;
            if (lastTime < 300000) {
                return
            }
        }
        await axios
            .get(`${baseUrl}/getInitCode/${keyId}`, {timeout: 20000})
            .then((res) => {
                const {initCode} = res.data.data;
                sessionStorage.setItem('initCodeTime', new Date().getTime());

                if (!initCode) return;

                // 初始化api sdk
                sc.config({
                    debug: false, // 是否开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来
                    appId: appId, // 在统一 APP 开放平台服务器申请的 appId
                    initCode: initCode
                });

                //注册成功之后执行
                sc.ready(() => {
                    console.log("SDK初始化完成~~");
                });

                sc.error(() => {
                    sc.toast({
                        text: 'SDK初始化失败~~',
                    });
                    sessionStorage.setItem('initCodeTime', '')
                })
            })

            .catch(function () {
                sc.toast({
                    text: '网络正在开小差~~',
                });
            })
    }

    // 弹起授权
    async function forAuthPop(appId, keyId, userDataTypes, baseUrl) {
        const time = sessionStorage.getItem(`userAccessTokenTime${keyId}`);
        if (time) {
            if (new Date().getTime() - time < 2 * 60 * 60 * 1000) {
                console.log("userAccessTokenTime生效中  无需授权");
                const userAccessToken = JSON.parse(sessionStorage.getItem(`userAccessToken${code}`));
                await fetchUserInfo(appId, keyId, userDataTypes, baseUrl, userAccessToken);
                return
            }
        }

        // 获取授权
        sc.userAuth({
            appId: appId,
            userDataTypes: userDataTypes
        }, (ress) => {
            if (ress.code === 0) {
                // 根据得到的requestCode 进行校验
                axios.post(`${baseUrl}/checkRequestCode`, {
                    requestCode: ress.data.requestCode,
                    keyId: keyId,
                    appId: appId
                })
                    .then((response) => {
                        // 授权成功
                        sessionStorage.setItem(`userAccessToken${keyId}`, JSON.stringify(response.data.data.userAccessToken));
                        sessionStorage.setItem(`userAccessTokenTime${keyId}`, new Date().getTime());
                        fetchUserInfo(appId, keyId, userDataTypes, baseUrl, response.data.data.userAccessToken)
                    })
            } else {
                setTimeout(() => {
                    sc.goback();
                    if (window.loadingInfo) {
                        window.loadingInfo.close()
                    }
                }, 1500);
                if (ress.code === -10001) {
                    sc.toast({
                        text: '初始化失败',
                    });
                } else if (ress.code === -10002) {
                    sc.toast({
                        text: '您已拒绝授权~~',
                    });
                } else if (ress.code === -10003) {
                    sc.toast({
                        text: '您还未登录~~',
                    });
                } else {
                    sc.toast({
                        text: '网络正在开小差~~',
                    });
                }
            }
        })

    }

    // 获取用户信息
    async function fetchUserInfo(appId, keyId, userDataTypes, baseUrl, userAccessToken, that, fun) {
        await axios.post(`${baseUrl}/getUserInfo`, {
            userAccessToken: userAccessToken
        })
            .then((res) => {
                if (res.data.code !== 200) {
                    sc.toast({
                        text: '获取用户信息失败~~',
                    });
                    // setTimeout(() => {
                    //     sc.goback();
                    //     if (window.loadingInfo) {
                    //         window.loadingInfo.close()
                    //     }
                    // }, 1500)
                } else if (res.data.data.realNameStatus) {
                    // 用户实名则结束
                    sessionStorage.setItem('userInfo', JSON.stringify(res.data.data));
                } else {
                    //  未实名需要先实名
                    // isRealName(appId, keyId, userDataTypes, baseUrl, that, fun)
                }
            })
    }

    // 是否实名认证
    async function isRealName(appId, keyId, userDataTypes, baseUrl, that, fun) {
        if (window.loadingInfo) {
            window.loadingInfo.close()
        }
        window.dia = Dialog({
            // 成功，当传入infoType为0时，可得到认证人脸图片
            message: '开始实名认证',
            buttons: [
                {
                    active: true,
                    text: '取消',
                    handler(hide) {
                        hide();
                        sc.goback()
                    }
                },
                {
                    active: true,
                    text: '确定',
                    handler(hide) {
                        hide();
                        sc.verify(
                            {
                                infoType: '0'
                            },
                            (res1) => {
                                if (res1.code === 0) {
                                    // 再次获取用户信息
                                    fetchUserInfo(appId, keyId, userDataTypes, baseUrl, JSON.parse(localStorage.getItem(`userAccessToken${keyId}`), that, fun))
                                } else {
                                    sc.toast({
                                        text: '实名失败~~',
                                    });
                                    setTimeout(() => {
                                        sc.goback();
                                        if (window.loadingInfo) {
                                            window.loadingInfo.close()
                                        }
                                    }, 1500)
                                }
                            }
                        )
                    }
                }
            ]
        })
    }

    export default {
        name: "list04",
        created() {
            // initSdk("3a28dde865184b9eb48b93a20301ed6e", "100"); //卫健委
            // initSdk("b7210844ab944e488304a0d51de43349", "999"); //测试账号
        },
        methods: {
            pay() {
                console.log('弹出支付...');
                // sc.pay(
                //     {
                //         payId: '1',
                //         mchOrderNo: '2',
                //         merchantNo: '3'
                //     },
                //     function(res) {
                //         if (res.code === 0) {
                //             // 支付成功
                //             console.log('支付成功');
                //         } else {
                //             // 失败
                //             console.log('失败');
                //         }
                //     }
                // );
                console.log('支付结束...');

            }
        }
    }
</script>

<style scoped>
    @import "../../assets/tap-water/css/base.css";
    @import "../../assets/tap-water/css/other.css";
</style>
